<template>
  <div>
    <el-card shadow="never" class="box-card">
        <template #header>
            <div class="card-header">
                <span>个人信息</span>
            </div>
        </template>
        <div class="block">
          <el-avatar :size="100" :src="user.avatar" />
        </div>
        <el-descriptions
            :column="1"
            size="large"
        >
            <el-descriptions-item label="用户">{{user.userName}}</el-descriptions-item>
            <el-descriptions-item label="昵称">{{user.nickname}}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{user.email}}</el-descriptions-item>
            <el-descriptions-item label="身份">{{user.role}}</el-descriptions-item>
        </el-descriptions>
    </el-card>
    <el-card shadow="never" class="box-card">
        <template #header>
            <div class="card-header">
                <span>目录</span>
            </div>
        </template>
    <el-menu
        :default-active="$router.currentRoute.value.path"
        class="el-menu-vertical-demo"
        :router="true"
    >
        <el-menu-item index="/myhome">
        <el-icon><Monitor /></el-icon>
        <span>数据统计</span>
        </el-menu-item>
        <el-menu-item index="/myfav">
        <el-icon><Wallet /></el-icon>
        <span>我的收藏</span>
        </el-menu-item>
        <el-menu-item index="/mypub">
        <el-icon><Files /></el-icon>
        <span>我的发布</span>
        </el-menu-item>
        <el-menu-item index="/myupd">
        <el-icon><Edit /></el-icon>
        <span>修改信息</span>
        </el-menu-item>
    </el-menu>
    </el-card>
  </div>
</template>

<script>
// import {mapState} from 'vuex'
import { Monitor, Files, Wallet, Edit } from '@element-plus/icons-vue'
import api from '../../api/data.js'
export default {
  name: 'MyAside',
  components: {
    Monitor,
    Edit,
    Files,
    Wallet,
    // Search,
    // ArrowRightBold
  },
  data () {
    return {
        user: {},
    }
  },
  mounted () {
    this.pageChange()
  },
  methods: {
    pageChange () {
      this.user.userName = this.$store.state.userName
      this.user.nickname = this.$store.state.nickname
      this.user.email = this.$store.state.email
      this.user.role = this.$store.state.role
      this.user.avatar = api.baseUrl + this.$store.state.avatar + '?r=' + Math.random()*1000
    }
  },
  computed:{
		pageChanged () {
			return this.$store.state.pageChanged
		}
	},
  watch: {
    pageChanged (newData) {
      if (newData) {
        this.$store.commit('pageChangedComplete')
        this.pageChange()
      }
    }
  }
}
</script>

<style scoped>
.box-card {
  margin-top: 2vh;
}
.el-avatar {
    margin-left: 1vw;
    margin-bottom: 2vh;
}
</style>
